<template>
    <div style="margin-top: 15px;" id="app">
        <el-input  placeholder="请输入内容" v-model="input4" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="编号" value="1"></el-option>
                <el-option label="姓名" value="2"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" v-on:click="departmentFind(input4)" >查询</el-button>
        </el-input>
        <el-table
                v-loading="loading"
                :data="tableData"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="部门名"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="leader"
                    label="部门主管"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="attendanceNumber"
                    label="部门总人数"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="profit"
                    label="部门应到人数"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="realNumber"
                    label="部门实到人数"
                    width="120">
            </el-table-column>
            <el-table-column align="right" width="280">
                <template slot="header">
                      <el-button type="primary" @click="save=true" size="mini"plain>添加</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" plain @click="edit=true,getForm(scope.row.id)" v-if="scope.row">修改</el-button>
                    <el-button size="mini" type="danger" plain @click="deleteDepartment(scope.row)" v-if="scope.row">删除</el-button>
                    <el-button size="mini" type="info" plain @click="findWorker=true,getWorkerList(scope.row.id)" v-if="scope.row">员工列表</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="margin: 15px 0px;"
                prev-text="上一页" next-text="下一页" background
                layout="prev, pager, next, sizes, jumper, total"
                :page-sizes="[5,10,20,40]"
                :page-size="pageSize"
                :total="total"
                :current-page="pageNow"
                @current-change="findPage"
                @size-change="findSize">
        </el-pagination>
        <el-dialog title="修改员工信息" :visible.sync="edit" width="30%">
            <el-form  :model="eform" ref="editForm"  :rules="rules" label-width="120px">
                <el-form-item label="编号:" prop="id">
                    <el-input v-model="eform.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="部门名:" prop="name">
                    <el-input v-model="eform.name"></el-input>
                </el-form-item>
                <el-form-item label="部门主管:" prop="leader">
                    <el-input v-model="eform.leader" ></el-input>
                </el-form-item>
                <el-form-item prop="workerCounts" label="部门总人数:">
                    <el-input v-model="eform.workerCounts" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item prop="attendanceNumber" label="今日应到人数:">
                    <el-input v-model="eform.attendanceNumber" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item prop="realNumber" label="今日实到人数:">
                    <el-input v-model="eform.realNumber" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="edit = false">取 消</el-button>
            <el-button type="primary" @click="edit = false,updateDepartment('editForm')">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="添加部门信息" :visible.sync="save" width="30%">
                    <el-form  ref="sForm"  label-width="80px" :model="saveForm" :rules="saveRules">
                        <el-form-item label="部门号" prop="id">
                            <el-input v-model="saveForm.id" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="部门名称" prop="name">
                            <el-input v-model="saveForm.name"></el-input>
                        </el-form-item>
                        <el-form-item prop="leader" label="部门总管:">
                            <el-input v-model="saveForm.leader" ></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="save = false">取 消</el-button>
                    <el-button type="primary" @click="save = false,saveDepartment('sForm')">确 定</el-button>
                  </span>
                </el-dialog>
        <el-dialog title="员工列表" :visible.sync="findWorker" width="70%">
            <el-table
                    :data="workerList"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="编号"
                        sortable
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="age"
                        label="年龄"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="性别"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱"
                        width="100">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="findWorker = false">确定</el-button>
                  </span>
        </el-dialog>
    </div>

</template>

<script>

    var list = [];
    /* 银行账户 */
    export function validateAccountNumber(str) {
        const reg = /^([1-9]{1})$/
        return reg.test(str)
    }
    export default {
        data() {
            let num = /^(0|\+?[1-9][0-9]*)$/;
            let isNum = (rule, value, callback) => {
                if (!num.test(value)) {
                    return callback(new Error('格式错误'))
                } else {
                    callback()
                }
            };
            let percent = /^(?:[1-9]?\d|100)$/;
            let isPercent = (rule, value, callback) => {
                if (!percent.test(value)) {
                    return callback(new Error('请输入0-100的整数'))
                } else {
                    callback()
                }
            };
            var list=[];
            for(let i=0;i<20;i++){
                list[i]={
                    value: null,
                    label: null,
                }
            }
            const _this = this
            this.$http.post("department/findAllDepartment").then(function (resp) {
                for (let i = 0; i < resp.data.length; i++) {
                    _this.options[i].value = resp.data[i].name
                    _this.options[i].label = resp.data[i].name
                }
            })
            return {
                add:false,
                loading: false,
                total:0,//总页数，从后台查询
                pageNow:1,//当前页数，默认为1
                pageSize:20,//当前页显示的数据条数，默认为20
                options: list,
                input4:null,
                select: '请选择',
                workerList:null,
                tableData: null,
                findList:null,
                findWorker:false,
                list:false,
                edit:false,
                save:false,
                rules:
                    {
                        name:[
                            { required: true,message: "请输入部门名称",trigger: "change"},
                            { min: 2, max: 30, message: "长度在 2 到 10 个字符", trigger: "change" }
                        ],
                        leader:[
                            { required: true,message: "请输入部门主管",trigger: "change"},
                            { min: 2, max: 30, message: "长度在 2 到 4 个字符", trigger: "change" }
                        ],
                    },
                eform:[],
                 saveForm:{
                                    id:'',
                                    name:'',
                                    leader:'',
                                    workerCounts:'',
                                    realNumber :'',
                                },
                                saveRules:{
                                    name:[
                                        { required: true,message: "请输入部门名称",trigger: "change"},
                                        { min: 2, max: 30, message: "长度在 2 到 10 个字符", trigger: "change" }
                                    ],
                                    leader:[
                                        { required: true,message: "请输入部门主管",trigger: "change"},
                                        { min: 2, max: 30, message: "长度在 2 到 10个字符", trigger: "change" }
                                    ],
                                },
            }
        },


        methods:{
            getWorkerList(id){
                const _this = this
                this.$http.post("worker/findByDepartment",id).then(function(resp) {
                    _this.workerList =resp.data.data
                    console.log( _this.workerList)
                })
            },
         saveDepartment(formName){
             this.$refs[formName].validate(valid => {
                 if (valid) {
                        const _this = this
                        console.log(_this.saveForm)
                        this.$http.post("department/save",_this.saveForm).then(function(resp) {
                            if (resp.data.code == 2000) {
                                _this.$message.success('添加成功')
                                location.reload();
                            }
                        })
         } else {
                this.$message.error("添加信息填写错误")
            }
        })
                    },
            findPage(page){
                console.log("当前页数："+page);
                this.pageNow=page;
                this.findAllTableDataByPage();
            },
            findSize(size){
                console.log("当前页面记录条数："+size);
                this.pageSize=size;
                this.findAllTableDataByPage();
            },
            findAllTableDataByPage(){
                this.$http.get("department/findByPage?pageNow="+this.pageNow+ "&pageSize=" + this.pageSize).then((res)=>{
                    // console.log(res.data);
                    this.tableData=res.data.salaries;
                    this.total=res.data.total;
                });
            },
            handleSelectionChange(val){
                console.log("handleSelectionChange--",val)
                this.tableChecked=val
            },
            getForm(id) {
                const _this = this
                this.$http.post("department/findOne", id).then(function (resp) {
                    _this.eform = resp.data.data[0]
                })
            },
            departmentFind(input){
                const _this = this
                if(input!==null&&input!==''&&this.select=="1"){
                    this.$http.post("department/findOne",input).then(function(resp){
                        console.log(resp.data.data);
                        _this.tableData=resp.data.data
                    })
                }else if(input!==null&&input!==''&&this.select=="2"){
                    this.$http.post("department/findByName",input).then(function(resp){
                        console.log(resp.data);
                        _this.tableData=resp.data.data
                    })
                }else{
                    this.$http.post("department/findAll").then(function(resp){
                        console.log(resp.data.data);
                        _this.tableData=resp.data.data
                    })
                }
            },
            updateDepartment(formName){
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        const _this = this
                        this.$http.post("department/update", this.eform).then(function (resp) {
                            if (resp.data.code == 2000) _this.$message.success("修改成功")
                            location.reload();
                        });
                    }else{
                        this.$message.error("信息输入错误")
                    }
                })
            },
            deleteDepartment(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post("department/delete",row.id)
                    location.reload();
                    this.$message({
                            type: 'success',
                            message: '删除成功!'
                        }
                    );
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                 const _this = this
                this.$http.post("worker/findLastId").then(function(resp){
                    _this.saveForm.id=resp.data.data+1
                })
            },
        },
        created(){
            const _this = this
            this.$http.post("department/findLastId").then(function(resp){
                            _this.saveForm.id=resp.data.data+1
                        })
            this.$http.post("department/findList",window.sessionStorage.getItem("id")).then(function(resp){
                _this.tableData=resp.data.data
            })
        }
    }
</script>
<style>
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .page{
        float: right;
    }
</style>